<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 对不识别viewport设备优化 -->
    <meta name="HandheldFriendly" content="true">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>分类 | 商超世界</title>
    <link rel="icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../public/css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/class.css">
</head>

<body>
    <!-- 搜索框 -->
    <div class="search">
        <input type="search" name="" id="" placeholder="请输入商品、店铺">
    </div>
    <!-- 种类及内容 -->
    <div class="variety clearfix" id="wrapper">
        <!-- 左侧种类 -->
        <ul class="variety_left fl">
            <li class="on">休闲食品</li>
            <li>冷热速食</li>
            <li>酒水饮料</li>
            <li>家具用品</li>
            <li>粮油调味</li>
            <li>清洁日化</li>
            <li>鲜花蛋糕</li>
            <li>医疗保健</li>
            <li>肉禽蛋奶</li>
            <li>生鲜水果</li>
            <li>厨房用品</li>
            <li>进口食品</li>
            <li>冷热速食</li>
        </ul>
        <!-- 右侧商品细分类 -->
        <ul class="variety_right fl clearfix">
            <li>
                <a href="">
                    <img src="./images/default.png" alt="">
                    <p>糕点</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/default.png" alt="">
                    <p>巧克力</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/default.png" alt="">
                    <p>膨化食品</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/default.png" alt="">
                    <p>饼干</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/default.png" alt="">
                    <p>糖果</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/default.png" alt="">
                    <p>肉干肉脯</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- 底部选项卡样式 -->
    <footer>
        <ul>
            <!-- 主页 -->
            <li>
                <a href="">
                    <img src="./images/home.png">
                    <p>首页</p>
                </a>
            </li>
            <!-- 分类 -->
            <li class="on">
                <a href="">
                    <img src="./images/class_on.png">
                    <p>分类</p>
                </a>
            </li>
            <!-- 附近 -->
            <li class="map">
                <a href="">
                    <img src="./images/map.png">
                    <p>附近商家</p>
                </a>
            </li>
            <!-- 购物车 -->
            <li>
                <a href="">
                    <img src="./images/shopCart.png">
                    <p>购物车</p>
                </a>
            </li>
            <!-- 我的 -->
            <li>
                <a href="">
                    <img src="./images/mine.png">
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
</body>
<script src="../public/js/rem.js"></script>
<script type="text/javascript" src="./js/iscroll.js"></script>
<script type="text/javascript">
    new IScroll("#wrapper",{
        scrollX: false,
        scrollY: true,
        mouseWheel: true
    })
</script>
</html>